/*
 * @Description: 新增的月份列表账单页面Demo
 * @Author: yingying.fan
 * @Date: 2019-04-09 16:55:17
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-10 10:51:34
 */
<template>
  <consume-list
    ref="listpanel"
    :getListByApi="getListByAjax"
  >
    <!-- <button
      @click="refreshList"
      slot="header"
    >刷新列表</button> -->
    <bus-fail-hint
      slot="header"
      ref="failhint"
    />
    <template
      slot="monthRight"
      slot-scope="item"
    >
      <span v-if="item.REFUND_AMOUNT">
        退款&nbsp;&yen;{{item.REFUND_AMOUNT|formatPrice}}
        &nbsp;&nbsp;|&nbsp;&nbsp;
      </span>
      <span>
        消费&nbsp;&yen;{{item.BILL_AMOUNT|formatPrice}}
      </span>
    </template>
  </consume-list>
</template>

<script>
import BusFailHint from './components/BusFailHint'
import ConsumeListPage from './page/ConsumeListPage'
import { getConsumeList } from './api/api.js'
export default {
  name: 'App',
  components: {
    'bus-fail-hint': BusFailHint,
    'consume-list': ConsumeListPage
  },
  data() {
    return {
      getListByAjax: this.getConsumeListByAjax
    }
  },
  filters: {
    formatPrice(money) {
      if (!money) {
        return '0.00'
      }
      return money.toFixed(2)
    }
  },
  methods: {
    refreshList() {
      this.$refs.listpanel.getListRefresh()
    },
    getConsumeListByAjax(pageIndex, pageSize) {
      if (pageIndex === 1) {
        this.$refs.failhint.getFailTimes()
      }
      return getConsumeList(pageIndex, pageSize)
    }
  }
}
</script>
